<html>
  <head>
    <style>
      .hidden { display: none; }
      .container { margin-top: 1em; }
      .col-md-3 h1 { margin-top: 10px; }
    </style>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/black-tie/jquery-ui.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
    <script src="aws-cognito-sdk.min.js"></script>
    <script src="amazon-cognito-identity.min.js"></script>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.20.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
    <script src="https://apis.google.com/js/client:plusone.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

    <script src="vars.js"></script>
    <script src="index.js"></script>

    <script>
    </script>
  </head>
  <body>



    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
              <img src="https://mongoose-os.com/downloads/tmp/logo_blue.png"
                height="24" style="display: inline-block;">
              Mongoose OS Smart Heater
            </a>
          </div>


        <div id="signedin_div" class="hidden">
          <p>
            Signed in as <span id="signedin_username_span">...</span>
            <input type="button" value="Sign out" id="signout_button" />
          </p>
        </div>

        <div id="signedout_div">
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#" id="google_signin"><i class="fa fa-google"></i> Sign in using Google</a></li>
              <li><a href="#" id="facebook_signin">
                <fb:login-button scope="public_profile,email" onlogin="facebookCheckLoginState();">
                  <i class="fa fa-facebook"></i> Sign in using Facebook
                </fb:login-button>
              </a></li>
            </ul>
          </div>
        </div>

        </div>
      </nav>

      <div class="row" style="margin-top: 3em;">
        <div class="col-md-3 text-center">
          <!-- <h2>Status</h2> -->
          <input style="padding-top: 15px;" id="status"
            type="checkbox" data-toggle="toggle" data-size="large">
          <h3>Status</h3>
          <span class="text-muted">(sign in to switch on/off)</span>
        </div>
        <div class="col-md-3 text-center">
          <h1><span class="label label-info" id="temp">loading...</span></h1>
          <h3>Temperature</h3>
        </div>
        <div class="col-md-3 text-center">
          <h1><span class="label label-info" id="time">loading...</span></h1>
          <h3>Time</h3>
        </div>
        <div class="col-md-3 text-center">
          <h1><span class="label label-info" id="devid">loading...</span></h1>
          <h3>Device ID</h3>
        </div>
      </div>

      <div class="panel panel-default" style="margin-top: 2em;">
        <div class="panel-heading">
          <h3 class="panel-title">Temperature graph in Celsius, last 2 days</h3>
        </div>
        <div class="panel-body">
          <div style="width: 100%; height: 200px">
            <canvas id="tempChart" style="height: 100%; width: 100%"></canvas>
          </div>
        </div>
      </div>

      <div class="alert alert-success">
        This is an example of full-stack IoT reference project based on
        <a href="https://mongoose-os.com">MongooseOS</a> and Amazon AWS
        cloud infrastructure. See step-by-step instructions at
        <a href="https://mongoose-os.com/aws-smart-heater.html">https://mongoose-os.com/aws-smart-heater.html</a>.
        The device side functionality runs on
        MongooseOS. 
        It reports temperature, and accepts on/off commands.
        The cloud side uses AWS IoT, Dynamo DB, S3 and Cognito.
      </div>

    </div> 

  </body>
</html>

